<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="diy-search">
      <view class="inner">
        <text class="search-icon iconfont icon-search"></text>
        <input placeholder-style="color:#bbb;font-size:12px;" type="text" placeholder="请输入关键词搜索" />
        <view class="search_btn">搜索</view>
      </view>
    </view>
    <u-tabs-swiper
      ref="uTabs"
      :fontSize="tabOptions['font-size']"
      :activeColor="tabOptions['active-color']"
      :inactiveColor="tabOptions['inactive-color']"
      :barWidth="tabOptions['bar-width']"
      :bgColor="tabOptions['bg-color']"
      :gutter="tabOptions.gutter"
      :list="list"
      :current="current"
      @change="tabsChange"
      :is-scroll="false"
      swiperWidth="750"
    />

    <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
      <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
        <scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
          <view class="order-item" v-for="(item, index) in orderList" :key="index">
            <view class="status">
              <view class="status_box">
                <view class="text">{{ getText(item.orderType, item.status) }}</view>
                <view class="trangle"></view>
              </view>
              <view class="des">{{ item.des }}</view>
            </view>
            <view class="order-item-top">
              <image :src="item.coverImage" class="order-item-img"></image>
              <view class="order-item-right">
                <view class="order-item-title">{{ item.goodsName }}</view>
                <view class="order-item-time">{{ item.createTime }} &nbsp;下单</view>
                <view class="num">
                  <text>x{{ item.totalAmount }}</text>
                </view>
                <view class="order-item-price">
                  <view class="box">
                    <view class="order-item-price1">
                      <text class="text1">￥</text>
                      <text class="text2">{{ item.nowPrice }}</text>
                    </view>
                    <view class="order-item-price2">￥{{ item.oldPrice }}</view>
                  </view>
                  <view class="order-item-bottom-right-btn" @click="toDetail(item)">查看详情 ></view>
                </view>
              </view>
            </view>
          </view>
          <view v-if="orderList.length == 0" style="margin-top: 30rpx; text-align: center">暂无数据</view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { orderList } from "@/api/yanxue/order";
import { dateFormat } from "@/utils/util";
export default {
  data() {
    return {
      list: [
        { name: "研学/待出发", type: 1 },
        { name: "文创/待发货", type: 2 },
        { name: "文创/待收货", type: 3 },
        { name: "师训/待学习", type: 4 },
        { name: "全部订单", type: 0 },
      ],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      tabOptions: {
        "font-size": 24,
        "active-color": "#F95513",
        "inactive-color": "#656565",
        "bar-width": 106,
        "bg-color": "#F6F6F6",
        gutter: 28,
      },
      orderList: [
        // {
        //   id: 1,
        //   status: 1,
        //   title: "【遇见川美】丨 川美研学第一期",
        //   time: "2024/05/01-05/06",
        //   userNum: 10,
        //   des: "开营倒计时 3天 10:12:12",
        //   price1: 38900,
        //   price2: 48900,
        //   img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/order_img.png",
        // },
        // {
        //   id: 2,
        //   status: 2,
        //   title: "【遇见川美】丨 川美研学第一期",
        //   time: "2024/05/01-05/06",
        //   userNum: 10,
        //   des: "开营倒计时 3天 10:12:12",
        //   price1: 38900,
        //   price2: 48900,
        //   img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/order_img.png",
        // },
        // {
        //   id: 3,
        //   status: 3,
        //   title: "【遇见川美】丨 川美研学第一期",
        //   time: "2024/05/01-05/06",
        //   userNum: 10,
        //   des: "开营倒计时 3天 10:12:12",
        //   price1: 38900,
        //   price2: 48900,
        //   img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/order_img.png",
        // },
        // {
        //   id: 4,
        //   status: 4,
        //   title: "【遇见川美】丨 川美研学第一期",
        //   time: "2024/05/01-05/06",
        //   userNum: 10,
        //   des: "开营倒计时 3天 10:12:12",
        //   price1: 38900,
        //   price2: 48900,
        //   img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/order_img.png",
        // },
        // {
        //   id: 5,
        //   status: 5,
        //   title: "【遇见川美】丨 川美研学第一期",
        //   time: "2024/05/01-05/06",
        //   userNum: 10,
        //   des: "开营倒计时 3天 10:12:12",
        //   price1: 38900,
        //   price2: 48900,
        //   img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/order_img.png",
        // },
      ], // 订单列表
    };
  },
  onLoad(options) {
    this.current = options.current || 0;
    this.swiperCurrent = options.current || 0;
    this.tabsChange(options.current || 0);
  },
  onShow() {
    this.getOrderList();
  },
  methods: {
    getText(type, status) {
      if (!type || status == undefined) return "";
      let textObj = {
        1: { type: "研学/", status: { 0: "待出发", 1: "已出发", 2: "已完成" } },
        2: { type: "师训/", status: { 0: "待学习", 1: "学习中", 2: "已完成" } },
        3: { type: "文创/", status: { 0: "待发货", 1: "待收货", 2: "已收货" } },
      };

      return textObj[type].type + textObj[type].status[status];
    },
    // getTips(item) {
    //   if (!item.orderType) return "";
    //   let textObj = {
    //     1: { type: "研学/", key: item.joinAmount + "已报名" },
    //     2: { type: "师训/", key: item.joinAmount + "已报名" },
    //     3: { type: "文创/", key: "x" + item.totalAmount },
    //   };
    //   return textObj[item.orderType].key;
    // },
    toDetail(item) {
      if (item.orderType == 1) {
        // 跳转研学详情
        this.$navTo("pagesA/yanxue/yanxue_submit?detailId=" + item.id);
      }
      if (item.orderType == 2) {
        // 跳转师训详情
        this.$navTo("pagesA/teach/teach_submit?detailId=" + item.id);
      }
      if (item.orderType == 3) {
        // 跳转文创详情
        this.$navTo("pagesA/cultural/cultural_submit?detailId=" + item.id);
      }
    },
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      if (this.$refs.uTabs.setDx) {
        this.$refs.uTabs.setDx(dx);
      }
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
      this.orderList = [];
      this.getOrderList();
    },
    // scroll-view到底部加载更多
    onreachBottom() {},
    getOrderList() {
      let type = this.list[this.current].type;
      orderList({ type: type, rows: 100, page: 1 }).then((res) => {
        this.orderList = res.result.list.map((x) => {
          x.createTime = dateFormat("YYYY/mm/dd HH:MM", new Date(x.createTime));
          return { ...x };
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  .swiper-box {
    flex: 1;
  }
}
.order-item {
  width: 702rpx;
  height: 316rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(52, 52, 52, 0.13);
  border-radius: 20rpx;
  margin: 20rpx auto 0 auto;
  padding: 16rpx 26rpx 18rpx 28rpx;
  .status {
    display: flex;
    justify-content: space-between;
    .status_box {
      width: 206rpx;
      height: 46rpx;
      background: #a2ff00;
      border-radius: 23rpx;
      line-height: 46rpx;
      position: relative;
      .text {
        font-family: HarmonyOS Sans SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #010101;
        text-align: center;
        display: block;
      }
      .trangle {
        width: 0;
        height: 0;
        border-left: 17rpx solid transparent;
        border-right: 17rpx solid transparent;
        border-top: 17rpx solid #a2ff00;
        position: absolute;
        left: calc(50% - 17rpx);
      }
    }
    .des {
      font-family: HarmonyOS Sans SC;
      font-weight: bold;
      font-size: 24rpx;
      color: #010101;
      line-height: 24rpx;
      margin-top: 10rpx;
    }
  }
  .order-item-top {
    display: flex;
    margin-top: 17rpx;
    .order-item-img {
      width: 206rpx;
      height: 210rpx;
      border-radius: 8rpx;
      margin-right: 32rpx;
    }
    .order-item-right {
      flex: 1;
      .order-item-title {
        font-family: HarmonyOS Sans SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #010101;
        line-height: 24rpx;
      }
      .order-item-time {
        font-family: HarmonyOS Sans SC;
        font-size: 24rpx;
        color: #010101;
        line-height: 20rpx;
        margin-top: 26rpx;
      }
      .num {
        width: 44rpx;
        height: 44rpx;
        background: #e9e9f0;
        border-radius: 20rpx;
        font-family: HarmonyOS Sans SC;
        font-size: 24rpx;
        color: #353535;
        line-height: 24rpx;
        margin-top: 22rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        text {
          transform: scale(0.83333);
        }
      }
      .order-item-des {
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
      }
      .order-item-price {
        display: flex;
        justify-content: space-between;
        align-items: end;
        height: 62rpx;
        margin-top: 10px;
        .box {
          display: flex;
          justify-content: space-between;
          align-items: end;
          margin-right: 30rpx;

          .order-item-price1 {
            margin-right: 12rpx;
            .text1 {
              font-family: HarmonyOS Sans SC;
              font-weight: bold;
              font-size: 24rpx;
              color: #010101;
            }
            .text2 {
              font-family: HarmonyOS Sans SC;
              font-weight: bold;
              font-size: 36rpx;
              color: #010101;
            }
          }
          .order-item-price2 {
            font-family: HarmonyOS Sans SC;
            font-size: 24rpx;
            color: #959595;
            line-height: 52rpx;
            text-decoration-line: line-through;
          }
        }
        .order-item-bottom-right-btn {
          width: 146rpx;
          height: 62rpx;
          background: #f95513;
          border-radius: 31rpx;
          font-family: HarmonyOS Sans SC;
          font-weight: bold;
          font-size: 24rpx;
          color: #ffffff;
          line-height: 62rpx;
          text-align: center;
        }
      }
    }
  }
}
// search

.diy-search {
  background: #f1f1f2;
  // font-size: 26rpx;
  width: 706rpx;
  height: 68rpx;
  margin: 0 auto;
  border-radius: 68rpx;
  overflow: hidden;
  margin-bottom: 14rpx;
  margin-top: 36rpx;
}

.inner {
  height: 68rpx;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 2px solid #f95513;
  padding: 0 20rpx;
  position: relative;
  border-radius: 68rpx;
  &.radius {
    border-radius: 10rpx;
  }

  &.round {
    border-radius: 68rpx;
  }
  .search-icon {
    margin-right: 8rpx;
    color: #f95513;
    font-weight: bold;
  }
  .search_btn {
    width: 102rpx;
    height: 48rpx;
    background: #a2ff00;
    border-radius: 24rpx;
    font-family: HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 10px;
    color: #010101;
    line-height: 48rpx;
    text-align: center;
    position: absolute;
    right: 8rpx;
  }
}

.search-input {
  height: 60rpx;
  line-height: 60rpx;
  color: #999;
  padding: 0 20rpx;
}
//   search end
</style>
